// @flow
import React from 'react'
import styles from './CharterPage.css'
import { Button, Row, Col } from 'antd'
import TableSelect from 'components/TableSelect'
type Props = {
  nextStep: Function,
  preStep: Function
}
class CharterPage extends React.Component {
  props: Props
  stepClick: Function
  constructor () {
    super()
    this.stepClick = this.stepClick.bind(this)
  }

  stepClick (str: string) {
    if (str === 'pre') {
      this.props.preStep(3)
    }
    if (str === 'next') {
      this.props.nextStep(5)
    }
  }

  render () {
    const options = [
      { headerName: '主机', field: 'name', width: 140 },
      { headerName: 'IP地址', field: 'ip' }
    ]
    const data = [
      { name: 'k2data-30.com.cn', ip: '192.168.130.29' },
      { name: 'k2data-31.com.cn', ip: '192.168.130.30' },
      { name: 'k2data-32.com.cn', ip: '192.168.130.31' },
      { name: 'k2data-33.com.cn', ip: '192.168.130.32' },
      { name: 'k2data-34.com.cn', ip: '192.168.130.33' }
    ]
    return (
      <div className={styles['charter']}>
        <div className={styles['main']}>
          <div className={styles['box']}>
            <Row style={{ padding: '10px 0px' }}>
              <Col span={6}>
                <span className={styles['label']}>storm-nimbus:</span>
              </Col>
              <Col span={16}>
                <TableSelect
                  options={options}
                  data={data}
                  />
              </Col>
            </Row>
            <Row style={{ padding: '10px 0px' }}>
              <Col span={6}>
                <span className={styles['label']}>storm-ui:</span>
              </Col>
              <Col span={16}>
                <TableSelect
                  options={options}
                  data={data}
                  />
              </Col>
            </Row>
            <Row style={{ padding: '10px 0px' }}>
              <Col span={6}>
                <span className={styles['label']}>storm-ui:</span>
              </Col>
              <Col span={16}>
                <TableSelect
                  options={options}
                  data={data}
                  />
              </Col>
            </Row>
            <Row style={{ padding: '10px 0px' }}>
              <Col span={6}>
                <span className={styles['label']}>storm-api:</span>
              </Col>
              <Col span={16}>
                <TableSelect
                  options={options}
                  data={data}
                  />
              </Col>
            </Row>
            <Row style={{ padding: '10px 0px' }}>
              <Col span={6}>
                <span className={styles['label']}>kafka数据目录:</span>
              </Col>
              <Col span={16}>
                <TableSelect
                  options={options}
                  data={data}
                  />
              </Col>
            </Row>
          </div>
        </div>
        <div className={styles['btn']}>
          <div style={{ float: 'right' }}>
            <Button onClick={() => { this.stepClick('pre') }}>上一步</Button> &emsp;
            <Button onClick={() => { this.stepClick('next') }} type='primary'>下一步</Button>
          </div>
        </div>
      </div>
    )
  }
}

export default CharterPage
